/**
 * @modal: 管理寄件地址
 */
import CommonModal from '@/components/CommonModal';
import { Button, Space, Popover } from 'antd';
import { useState, useEffect } from "react";
import SubTitle from '@/views/components/SubTitle';
import { QuestionCircleOutlined } from '@ant-design/icons';
import CommonTable from '@/components/CommonTable';
import { useNavigate } from 'react-router-dom';

function AddressSet({ handleCancel }) {

	const [open, setOpen] = useState(false);

	const navigate = useNavigate();
	useEffect(() => {
		setOpen(true);
	}, []);

	//跳转数据
	const handleOpenPage = (val) => {
		navigate(val);
	}

	const onCancel = () => {
		setOpen(false);
	};

	const afterClose = () => {
		handleCancel();
	};

	const suffixIcon = (
		<Popover content={
			<div style={{ width: '320px'}}>
				<div>
					以下是自发仓订单的寄件地址规则。
				</div>
				<div>
					代发订单的寄件地址按照下述规则处理
				</div>
				<div>
					①代发订单，由于使用的代发仓的快递，所以获取运单号的寄件地址会按照仓库的地址来
				</div>
				<div>
					②代发订单打印面单：支持按用户设置的上述优先级为2、3的寄件地址去打印
				</div>
				<div>
					③<span>京东、XX</span>的店铺订单，由于面单打印必须和获取运单号的地址一样，所以会按照代发仓库的寄件地址来打印
				</div>
			</div>
		}>
			<QuestionCircleOutlined />
		</Popover>
	)

	const columns = [
		{
			title: "优先级",
			dataIndex: "dataIndex",
			width: 60,
			render(v, r, i) {
				return i + 1;
			}
		},
		{
			title: '寄件地址',
			dataIndex: 'title',
			width: 150,
		},
		{
			title: '操作',
			dataIndex: 'url',
			width: 80,
			render: (t) => {
				if(!t) {
					return '/';
				}
				return (
					<Button  type='link' onClick={() => handleOpenPage(t)}>去设置</Button>
				)
			}
		},
	]

	const data = [
		{ title: '使用快递寄件地址', url: '/print/config' },
		{ title: '使用店铺寄件地址', url: '/views/basic/qimenStore' },
		{ title: '使用统一的默认寄件地址', url: '/account/sendAddress' },
		{ title: '平台快递的寄件地址', url: '' },
	]

	const TableProps = {
		columns,
		data,
	}

	return (
		<CommonModal
			title="管理寄件地址"
			afterClose={afterClose}
			open={open}
			width="464px"
			onCancel={onCancel}
			footer={<Button onClick={onCancel}>关闭</Button>}
		>
			<div style={{ display: 'flex', marginBottom: '12px', alignItems:'center'}}>
				<SubTitle wrapStyle={{ width: '136px', flex: '' }} symbol as="s2" title="管理订单寄件地址" />
				{suffixIcon}
			</div>
			<CommonTable { ...TableProps } />
		</CommonModal>
	);
}

export default AddressSet;
